<template>
	<uni-popup ref="feedbackPopupRef" type="bottom">
		<view class="feedback">
			<uni-section title="反馈类型" type="line">
				<view class="list">
					<view class="item" :class="{active:currentIndex === index}" v-for="(item,index) in typeList"
						:key="item.feedbackId" @click="onTypeClick(index)">{{item.feedbackTypeName}}</view>
					<i class="item2"></i>
					<i class="item2"></i>
				</view>
			</uni-section>
			<uni-section title="备注说明" type="line" padding="0 20rpx 20rpx">
				<uni-easyinput type="textarea" autoHeight v-model="detailCause"
					placeholder="请简要说明在答题中遇到的问题，以便运营人员进行判新和处理......"></uni-easyinput>
			</uni-section>
			<view class="btn-wrapper">
				<view class="btn" @click="onSubmitBtnClick">提交反馈</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		typeList: {
			type: Array,
			default: () => []
		}
	})

	const $emit = defineEmits(['submitFeedback'])

	// 详细原因
	const detailCause = ref('')
	// 当前选中的类型
	const currentIndex = ref(-1)

	const feedbackPopupRef = ref()

	// 点击类型
	const onTypeClick = (index) => {
		if (currentIndex.value === index) {
			currentIndex.value = -1
			return
		}
		currentIndex.value = index
	}

	// 点击提交按钮
	const onSubmitBtnClick = () => {
		// 只有没选才为-1
		if (currentIndex.value === -1) {
			uni.showToast({
				icon: "error",
				title: "请选择类型"
			})
			return
		}
		// 整理参数并发送事件(类型id，原因)
		const feedbackTypeId = props.typeList[currentIndex.value].feedbackTypeId
		$emit('submitFeedback', feedbackTypeId, detailCause.value)
		// 点击完按钮重置组件状态
		currentIndex.value = -1
		detailCause.value = ''
		// 关闭popup层
		close()
	}

	const open = () => {
		feedbackPopupRef.value.open()
	}

	const close = () => {
		feedbackPopupRef.value.close()
	}

	defineExpose({
		// 暴露显示和隐藏popup的方法
		open,
		close,
	})
</script>

<style lang="scss">
	.feedback {
		border-radius: 20rpx;
		width: 100vw;
		background-color: #FBFDFF;

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.item {
				width: 28%;
				text-align: center;
				margin-bottom: 16rpx;
				border: 2rpx solid #a2a2a2;
				color: $text-color;
				border-radius: 10rpx;
				padding: 10rpx 0;
				font-size: 26rpx;
			}

			.active {
				background-color: $second-primary-color;
				color: #fff;
				border: 2rpx solid transparent;
			}

			.item2 {
				width: 28%;
			}
		}

		.btn-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				padding: 10rpx 20rpx;
				border: 2rpx solid $second-primary-color;
				color: $text-color;
				width: 150rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
				text-align: center;
				border-radius: 14rpx;
				font-size: 26rpx;
			}
		}

	}
</style>